<template>
  <div>
    <!-- 上传图片公共文件 -->
    <viewer :images="selectImgList" class="descimgBox">
      <div
        v-for="(decImg, index) in selectImgList"
        :key="index"
        class="imgcontent"
      >
        <img :src="decImg.url" />
        <i
          class="el-icon-error imagedeleteicon"
          @click="imgRemove(index, decImg)"
        ></i>
      </div>
    </viewer>
    <el-upload
      v-show="selectImgList.length !== limit"
      accept="iamge/*"
      list-type="picture"
      action="#"
      multiple
      :auto-upload="false"
      :on-exceed="imgExceed"
      :on-change="imgChange"
      :limit="limit"
      :file-list="selectImgList"
    >
      <el-button size="small" type="primary"
        >点击上传{{ selectImgList.length }}/{{ limit }}</el-button
      >
    </el-upload>
  </div>
</template>

<script>
import { updateColl } from "../time";
export default {
  props: ["limit", "imgUrlList", "isUpdate", "keyName"],
  data() {
    return {
      // 展示图片数组
      selectImgList: [],
      rawId: "",
    };
  },
  mounted() {
    this.rawId = this.$route.query.rawId;
    console.log(this.rawId, "66");
  },
  methods: {
    // 删除图片触发
    imgRemove(index, file) {
      if (this.isUpdate) {
        this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {          
            this.$wxApp
              .deleteFile({
                fileList: [file.fileID],
              })
              .then(() => {               
                this.selectImgList.splice(index, 1);
                // 获取删除后剩余已上传的图片
                let UploadedImg = this.selectImgList.filter(
                  (item) => item.fileID
                );
                updateColl("books", this.rawId, {
                  [this.keyName]: UploadedImg,
                }).then((res) => {
                  console.log(res, "xiugai");
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                });
              });
          })
          .catch((err) => {
            console.log(err);
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.selectImgList.splice(index, 1);
      }
    },
    // 选择图片触发
    imgChange(file, fileList) {
      // 获取文件类型
      let fileType = file.name.split(".").slice(-1);
      // 限制文件后缀
      let typeArr = ["jpg", "gif", "bmp", "png", "jpeg"];
      // 过滤不是图片的文件
      if (!typeArr.includes(...fileType)) {
        this.$message("已自动过滤非图片文件");
        fileList.pop();
      } else if (Math.floor(file.size / 1024) > 2048) {
        this.$message("已自动过滤大小超过2M的图片");
        // 单张图片不允许超过2M
        fileList.pop();
      } else {
        this.selectImgList = fileList;
        // console.log(this.selectImgList);
      }
    },
    // 超出最大上传数量触发
    imgExceed() {
      this.$message(`最多上传${this.$props.limit}张图片`);
    },
    // 返回图片列表
    retImgUrls() {
      return this.selectImgList;
    },
    // 父组件调用传递过来数回显的图片列表
    setImgUrls(imgs) {
      this.selectImgList = imgs;
    },
  },
};
</script>

<style scoped>
.descimgBox {
  display: flex;
  flex-wrap: wrap;
  margin-right: 10px;
  gap: 10px;
}
.descimgBox > .imgcontent {
  position: relative;
  width: 100px;
  height: 100px;
}
.descimgBox > .imgcontent > img {
  width: 100%;
  height: 100%;
  border: 1px solid #c7c7c7;
  border-radius: 2px;
}
.imagedeleteicon {
  position: absolute;
  right: -6px;
  top: -4px;
  font-size: 20px;
  color: #f56c6c;
  background-color: white;
  border-radius: 50%;
}
</style>
<style>
.el-upload-list,
.el-upload-list--picture {
  display: none !important;
}
</style>